<template>
  <div class="pass-rate-container">
    <div class="chart" ref="itemRef" @click.stop="clickHandler"></div>
    <div class="title">
      <span class="text" @click.stop="clickHandler">{{ itemName }}</span>
    </div>
    <div class="title">
      <span class="text" @click.stop="clickHandler">{{ textNum }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUpdated } from "vue";
import * as echarts from "echarts";
import icon9659 from "@/assets/组 9659.png";

const emits = defineEmits(["click"]);
const itemRef = ref<HTMLElement>();
const props = defineProps({
  dataNum: {
    type: Number,
    default: 0,
  },
  itemName: {
    type: String,
    default: "",
  },
  itemValue: {
    type: String,
    default: "0",
  },
  textNum: {
    type: String,
    default: "",
  },
});
const instance = ref<any>();
const clickHandler = () => {
  emits("click", props.itemName);
};
onMounted(() => {
  instance.value = echarts.init(itemRef.value!, undefined, {
    devicePixelRatio: 2.5,
  });
  const option = {
    title: {
      text: props.dataNum + "%",
      left: "center",
      top: "middle",
      textStyle: {
        fontWeight: "bold",
        color: "#fff",
        fontSize: "14",
      },
      itemGap: 5,
      subtext: "合格率",
      subtextStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    polar: {
      center: ["50%", "50%"],
      radius: ["75%", "95%"],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: "",
        type: "bar",
        roundCap: true,
        showBackground: true,
        backgroundStyle: {
          color: "gray",
        },
        data: [props.dataNum],
        coordinateSystem: "polar",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#3D86F8",
              },
              {
                offset: 1,
                color: "#68DFFB",
              },
            ]),
          },
        },
      },
      {
        //进度圆环
        name: "Line 1",
        type: "pie",
        startAngle: 270,
        clockWise: false,
        radius: ["75%", "85%"],
        itemStyle: {
          normal: {
            label: {
              show: true,
            },
            labelLine: {
              show: false,
            },
          },
        },
        color: "rgba(0,0,0,0)",
        hoverAnimation: false,
        data: [
          {
            name: "",
            value: props.dataNum,
            color: "red",
            label: {
              position: "inside",
              padding: 10,
              // backgroundColor: {
              //   image: icon9659,
              //   width: 50,
              //   height: 50,
              // },
              borderRadius: "50%",
            },
          },
        ],
      },
    ],
  };
  instance.value.setOption(option);
});
onUpdated(() => {
  const option = {
    title: {
      text: props.dataNum + "%",
      left: "center",
      top: "middle",
      textStyle: {
        fontWeight: "bold",
        color: "#fff",
        fontSize: "14",
      },
      itemGap: 5,
      subtext: "合格率",
      subtextStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    polar: {
      center: ["50%", "50%"],
      radius: ["75%", "95%"],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: "",
        type: "bar",
        roundCap: true,
        showBackground: true,
        backgroundStyle: {
          color: "gray",
        },
        data: [props.dataNum],
        coordinateSystem: "polar",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#3D86F8",
              },
              {
                offset: 1,
                color: "#68DFFB",
              },
            ]),
          },
        },
      },
      {
        //进度圆环
        name: "Line 1",
        type: "pie",
        startAngle: 270,
        clockWise: false,
        radius: ["75%", "85%"],
        itemStyle: {
          normal: {
            label: {
              show: true,
            },
            labelLine: {
              show: false,
            },
          },
        },
        color: "rgba(0,0,0,0)",
        hoverAnimation: false,
        data: [
          {
            name: "",
            value: props.dataNum,
            color: "red",
            label: {
              position: "inside",
              padding: 10,
              // backgroundColor: {
              //   image: icon9659,
              //   width: 50,
              //   height: 50,
              // },
              borderRadius: "50%",
            },
          },
        ],
      },
    ],
  };
  instance.value.clear();
  instance.value.setOption(option);
});
</script>
<style lang="scss" scoped>
.pass-rate-container {
  display: flex;
  flex-direction: column;
  .chart {
    flex: 1;
  }
  .title {
    width: 100%;
    height: 17px;
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    .text {
      cursor: pointer;
      padding-right: 4px;
      white-space: nowrap;
    }
  }
}
</style>
